<script>
export default {
  data: function () {
    return {
      testNumber: 1024,
      testName: 'name',
      testBoolean: true,
      testList: ['Alpha', 'Beta', 'Charlie'],
      testObject: {foo: 'Alpha', bar: 'Beta', baz: 'Charlie'},
      testHTML: 'hello VUE <br/> HTML Mode if Line Break!',
      testValue: true,
      testVModel: 'hello, input!'
    }
  },
  methods: {
    clickHandler (event) {
      console.log(event)
      alert('clicked!')
    }
  }
}
</script>

<template>
  <div> Ref: https://v3.cn.vuejs.org/guide/template-syntax.html </div>
  <div> Ref: https://v3.cn.vuejs.org/guide/events.html </div>
  <div> Ref: https://v3.cn.vuejs.org/guide/conditional.html </div>
  <div> Ref: https://v3.cn.vuejs.org/guide/forms.html </div>

  <h1>1. Display Text</h1>
  <div> {{ testHTML }} </div>

  <h1>2. Display HTML (Directive: v-html)</h1>
  <div v-html="testHTML" />

  <h1>3. Use Expression</h1>
  <div> {{ testNumber }} +  1 = {{ testNumber + 1 }}</div>
  <input :id="testName" :value="testNumber + 2" />

  <h1>4. Dynamic Attribute (Directive: v-bind)</h1>
  <input v-bind:value="testHTML" />
  <br/>
  <input :id="testName" :value="testHTML" />

  <h1>5. Event Listener (Directive: v-on)</h1>
  <button v-on:click="clickHandler"> Click Me ! </button>
  <br/>
  <button @click="clickHandler"> Click Me ! </button>

  <h1>6. Branch (Directive: v-if & v-else-if & v-else, v-show )</h1>
  <div v-if="testBoolean"> v-if </div>
  <div v-else-if="testBoolean"> v-else-if </div>
  <div v-else> v-else </div>

  <div v-show="testBoolean"> v-show 0 </div>
  <div v-show="!testBoolean"> v-show 1 </div>

  <h1>7. Loop (Directive: v-for)</h1>
  <ul>
    <li v-for="item in testList">
      Array Item: {{ item }}
    </li>
  </ul>

  <ul>
    <li v-for="(item, index) in testList">
      Array Index: {{ index }}, Array Item: {{ item }}
    </li>
  </ul>

    <ul>
    <li v-for="(value, key) in testObject">
      Object Key: {{ key }}, Object Value: {{ value }}
    </li>
  </ul>

  <h1>8. Get Input (Directive: v-model)</h1>
  <div> {{ testVModel }} </div>
  <input v-model="testVModel" />

</template>

<style scoped>
</style>
